import React from 'react'
import { NavBar, Space, Toast } from 'antd-mobile'
import { MoreOutline } from 'antd-mobile-icons'
import { useHistory } from 'react-router-dom'
import { useDispatch} from 'react-redux'

export default function MyNavBar(props) {
  // 导航右侧部分
  const dispatch = useDispatch()
  const his = useHistory()
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ '--gap': '16px' }}>
        {
        props.rightText ? <span onClick={()=>{
          // 点击退出执行的代码: 清除本地登录信息(token/redux) -- 跳转到首页
          localStorage.removeItem('token')
          dispatch({
            type:'setUser',
            payload:''
          })
          his.push('/home')
        }}
        style={{
          fontSize:'16px'
        }}>{props.rightText}</span> : <MoreOutline /> 
        }
      </Space>
    </div>
  )
  const back = () => {
    his.goBack()
  }
  return (
    <NavBar right={props.isShow ? right : null} onBack={back} back="返回">
      {/* 插槽 */}
      {props.children}
    </NavBar>

  )
}
